<template>
  <div class="index-container">
    <div class="user-head">
      <div class="flex">
        <div class="user-head-portrait">
          <img :src="profileList.avatar || require('../../assets/images/head-portrait.png')" alt />
        </div>
        <div v-if="profileList" class="user-head-mess">
          <div class="user-head-name">{{ profileList.truename }}</div>
          <div class="user-head-number" @click="toPersonalInformation()">
            <van-icon :name="require('@/assets/images/mine_edit.png')" />
            <i class="ml5">编辑个人资料</i>
          </div>
        </div>
        <div v-if="!profileList" class="user-head-mess" @click="toLogin()">
          <div class="user-head-name">立即登陆/注册</div>
          <div class="user-head-number">登录畅享更多学习功能</div>
        </div>

        <van-button v-if="profileList">退出登录</van-button>
      </div>

      <div class="learn mt25">
        <div class="learn_box">
          <div class="time">{{ profileList.today_hours_studied || '00:00' }}</div>
          <div class="title">今日学习(分钟)</div>
        </div>
        <div class="learn_box right">
          <div class="time">{{ profileList.all_hours_studied || '00:00' }}</div>
          <div class="title">总学习时常(分钟)</div>
        </div>
      </div>
    </div>

    <div class="user-links">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">我的订单</i>
        </span>
      </div>
      <van-row>
        <van-col
          span="6"
          @click="orderClick(item.id)"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <van-icon :name="item.ico" />
          {{ item.name }}
        </van-col>
      </van-row>

      <div class="headline mt30">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">我的服务</i>
        </span>
      </div>

      <van-row id="fuwu">
        <van-col span="6" @click="handleFuwu(item)" v-for="(item, index) in fuwuList" :key="index">
          <van-icon :name="item.ico" />
          {{ item.name }}
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { getMineStudy } from '@/api/mine/index'
export default {
  data() {
    return {
      list: {
        code: '',
        account: '王派医学',
        balance: 0,
        profile: {
          avatar: require('../../assets/images/head-portrait.png')
        }
      },
      profileList: {},
      orderList: [
        { name: '待支付', id: 1, ico: require('@/assets/images/mine-unpaid.png') },
        { name: '已支付', id: 2, ico: require('@/assets/images/mine-prepaid.png') },
        { name: '已失效', id: 3, ico: require('@/assets/images/mine-failed.png') },
        { name: '全部订单', id: 0, ico: require('@/assets/images/mine-orders.png') }
      ],
      fuwuList: [
        { name: '我的课程', path: '/course', ico: require('@/assets/images/mine-serve4.png') },
        { name: '直播课表', path: '/class-schedule', ico: require('@/assets/images/mine-serve3.png') },
        { name: '我的收藏', path: '/collect', ico: require('@/assets/images/mine-serve5.png') },
        {
          name: '关于我们',
          url: 'http://h5.wangpaiyixue.cn/about-us',
          ico: require('@/assets/images/mine-serve6.png')
        },
        { name: '联系我们', path: '/contact-us', ico: require('@/assets/images/mine-serve7.png') }
      ]
    }
  },

  computed: {
    // profileList() {
    //   return this.$store.getters.profileList
    // }
  },

  mounted() {
    console.log(this.profileList)
    this.fetchList()
  },

  methods: {
    // 获取个人信息
    fetchList() {
      getMineStudy().then(res => {
        console.log(res)
        this.profileList = res.data
      })
    },
    toLogin() {
      this.$router.push({ path: '/login' })
    },
    // 编辑资料
    toPersonalInformation() {
      this.$router.push({ path: '/personal-information' })
    },
    // 我的订单
    orderClick(id) {
      this.$router.push({ name: 'Order', query: { id: id } })
    },
    // 服务
    handleFuwu(url) {
      console.log(url)
      if (url.path) {
        this.$router.push({ path: url.path })
      } else if (url.url) {
        window.location.href = url.url
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  min-height: calc(100vh);
  background: #ffffff;
  .user-head {
    width: 100%;
    height: 187px;
    background: #009697;
    .user-head-portrait {
      width: 60px;
      height: 60px;
      margin: 30px 15px 0 15px;
      border-radius: 50%;
      overflow: hidden;
      // background-color: pink;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .user-head-mess {
      margin-top: 35px;
      .user-head-name {
        font-size: 17px;
        font-weight: 600;
        color: #ffffff;
        line-height: 30px;
      }
      .user-head-number {
        margin-top: 5px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        .van-icon {
          vertical-align: text-top;
        }
      }
    }

    .van-button {
      position: absolute;
      padding: 0px;
      right: 15px;
      top: 42px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      width: 82px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
    }

    .learn {
      display: flex;
      .learn_box {
        width: 50%;
        text-align: center;
        .time {
          font-size: 16px;
          font-weight: 600;
          color: #ffffff;
          line-height: 25px;
        }
        .title {
          font-size: 13px;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .learn_box:nth-child(1) {
        border-right: 0.5px solid #52aaab;
      }
    }
  }

  .user-links {
    padding-top: 12px;
    .van-row {
      padding: 7px 0;
      font-size: 14px;
      text-align: center;
      .van-icon {
        display: block;
        font-size: 35px;
        .van-icon__image {
          display: inline-block;
        }
      }
    }
  }

  #fuwu {
    .van-col {
      margin-bottom: 7px;
    }
  }
}
</style>
